<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* p{
            background-color: green;
        } */
        /* 后代选择器 */
        /* body{
            background: rebeccapurple;
        } */
        /* 子选择器 */
        /* body>p{
            background-color: blue;
        } */
        /* 兄弟选择器 :只有一个邻居，对下不对上*/
        /* .active+p{
            background: yellow;
        } */
        /* 通用选择器:当前选中元素的向下兄弟选择器 */
        .active~p{
            background: green;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
</body>
</html>